/*
 * @Author: your name
 * @Date: 2020-08-01 10:05:08
 * @LastEditTime: 2020-08-01 18:13:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /图片懒加载/lazy.js
 */ 
/**
 * 初始化页面中所需懒加载的图片
 * @param {*} defaultSrc :默认图片路径
 */
function initLazyImg(defaultSrc='/img/loading.png') {
    // 得到所需要懒加载的所有图片的数组
    const imgs = Array.from(document.querySelectorAll("[data-src]"));

    // 1. 设置默认图片
    setDefaultImg();

    // 2. 设置懒加载图片
    loadImgs();

    let timer = null;
    // 3. 注册滚动事件
    window.addEventListener("scroll", function(){
        clearTimeout(timer);
        timer = setTimeout(function(){
            loadImgs();
        }, 500)
    })


    /**
     * 懒加载图片
     */
    function loadImgs() {
        for (let i = 0; i < imgs.length; i++) {
            const img = imgs[i];
            if (loadimg(img)) {
                imgs.splice(i, 1);
                i--;
            }
        }
    }

    /**
     * 分析该元素是否应该加载 返回 true or false
     * @param {*} img 
     */
    function loadimg(img) {
        // 该元素有一部分在视口之内， 获取该元素的位置信息
        const rect = img.getBoundingClientRect();
        // 判断元素在视口范围内
        // const temp = rect.right > 0 && rect.left < 视宽 && rect.bottom > 0 && rect.top < 视高
        const viewWidth = document.documentElement.clientWidth;
        const viewHeight = document.documentElement.clientHeight;

        const temp = rect.right > 0 && rect.left < viewWidth && rect.bottom > 0 && rect.top < viewHeight
        if (temp) {
            img.src = img.dataset.src;
            return true; // 表示已经进行了懒加载
        } else {
            return false // 表示没有进行懒加载 
        }
    }
    /**
     * 设置默认图片
     */
    function setDefaultImg() {
        for (let i = 0; i < imgs.length; i++) {
            const img = imgs[i];
            img.src = defaultSrc;
        }
    }
}
